<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育竞赛报名系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>


<style>
    body {
        /* width: 100vh; */
        height: 98vh;
        background: linear-gradient(#01264C, #00386E);
    }

    .tabbar {
        background: linear-gradient(#133758, rgb(6, 75, 112));
        color: #6E7B82;
        display: flex;
        justify-content: flex-start;
        padding: 0 30px;
        height: 80px;
        width: 100%;
        transform: translateY(-8%);
    }

    .tabbar .title {
        /* background-color: #fff; */
        padding-top: 10px;
        width: 20%;
    }

    .tabbar .title .h3,
    .tabbar .title span {
        display: inline-block;
        color: #5977ED;
    }

    .tabbar .title .h3 {
        letter-spacing: 2px;
        font-size: 20px;
        font-weight: bold;
        /* vertical-align: text-top; */

    }

    .tabbarlist {
        width: 80%;
        /* background-color: #ccc; */
        display: flex;
        flex-direction: row;
        text-align: center;
        height: 100%;
        padding-top: 2px;
    }

    .tabbarlist ul {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        height: 100%;
        /* background-color: red; */
        transform: translateY(-22%);
    }

    .tabbarlist ul li {
        list-style-type: none;
        /* background-color: #0B2F50; */
        flex: 1;
        cursor: pointer;
        padding: 0 10px;
        /* box-sizing: border-box; */
    }

    .tabbarlist ul li div {
        padding-top: 4px;
    }

    .tabbarlist ul li:hover {
        background-color: #0B2F50;
        color: white;
    }

    .tabbarlist ul li img {
        width: 37px;
        height: 37px;
    }
</style>

<body>

    <div id="app">

        <!-- #ADADAD -->
        <!-- FFC05D -->
        <div class="tabbar">
            <div class="title">
                <span class="h3">体育竞赛报名系统</span>
                <span>V1.0</span>
            </div>

            <div class="tabbarlist">
                <ul>
                    <li v-for="(item,index) in tabbarList" :key="item.id" @click="toTargetPage(item,index)">
                        <!-- <img id="tabbar1" :src="'http://localhost:3002'+item.defaultIcon" alt=""> -->
                        <img id="tabbar1" :src="item.defaultIcon" alt="">
                        <div>{{item.name}}</div>
                    </li>
                </ul>
            </div>
            <!-- <div class="main">
                <el-tabs value="first">
                    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
                    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
                </el-tabs>
            </div> -->
        </div>
    </div>

</body>

</html>
<script src="../../js/axios.min.js"></script>
<script src="../../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    new Vue({
        el: '#app',
        data: function () {
            return {
                tabbarList: [
                    { id: 1, name: '报名首页', defaultIcon: './images/tabbar/tabbar1.png', selectIcon: './images/tabbar/tabbar1s.png', img: '', process: '' },
                    { id: 2, name: '团队信息', defaultIcon: './images/tabbar/tabbar2.png', selectIcon: './images/tabbar/tabbar2s.png', img: '', process: '' },
                    { id: 3, name: '人员管理', defaultIcon: './images/tabbar/tabbar3.png', selectIcon: './images/tabbar/tabbar3s.png', img: '', process: '' },
                    { id: 4, name: '单练报名', defaultIcon: './images/tabbar/tabbar4.png', selectIcon: './images/tabbar/tabbar4s.png', img: '', process: '' },
                    { id: 5, name: '对练报名', defaultIcon: './images/tabbar/tabbar5.png', selectIcon: './images/tabbar/tabbar5s.png', img: '', process: '第三步' },
                    { id: 6, name: '集体报名', defaultIcon: './images/tabbar/tabbar6.png', selectIcon: './images/tabbar/tabbar6s.png', img: '', process: '第四步' },
                    { id: 7, name: '对抗报名', defaultIcon: './images/tabbar/tabbar7.png', selectIcon: './images/tabbar/tabbar7s.png', img: '', process: '第五步' },
                    { id: 8, name: '对抗展示', defaultIcon: './images/tabbar/tabbar8.png', selectIcon: './images/tabbar/tabbar8s.png', img: '', process: '第六步' },
                    { id: 9, name: '统计分析', defaultIcon: './images/tabbar/tabbar9.png', selectIcon: './images/tabbar/tabbar9s.png', img: '', process: '' },
                ],
                tabbarSrc: [],
            }
        },
        methods: {
            toTargetPage(item, index) {
                // console.log(index);
                // console.log(item.id - 1);
                item.defaultIcon = item.selectIcon

                // if (item.id - 1 == index) {
                //     item.defaultIcon = item.selectIcon
                // }
                // console.log(item.defaultIcon);
                // let indexs = this.$refs.group.dataset.indexs
                // console.log(indexs);
            }

        },
        mounted() {
            // axios({
            //     url: 'http://localhost:3002/competition/home/list',
            //     method: 'post',
            //     data: {}
            // }).then(res => {
            //     console.log(res.data.list);
            //     this.tabbarSrc = res.data.list
            // })
        }


    })
</script>